import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    BrowserRouter as Router,
    Redirect,
    Switch,
    Route,
    Link,
    RouteComponentProps,
    withRouter,
    matchPath
} from "react-router-dom"
import { IRouter, leftRouter } from '../router';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

interface IState {
    defaultOpenKeys: string[]
    defaultSelectedKeys: string[]
}

interface IProps extends RouteComponentProps {

}


class LeftBar extends Component<any, IState> {
    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            defaultOpenKeys: [],
            defaultSelectedKeys: []
        }
    }

    // 生命周期函数
    componentDidMount() {
        this.heightMent(leftRouter)
    }

    heightMent = (leftRouter: IRouter[]) => {
        let path = this.props.location.pathname
        for (const r of leftRouter) {
            let match = matchPath(path, { path: r.path })
            if (match) {
                if (match.isExact) {
                    this.setState({
                        defaultSelectedKeys: [r.key]
                    })
                } else {
                    this.setState({
                        defaultOpenKeys: [r.key]
                    })
                }
            }
            if (r.children) {
                this.heightMent(r.children)
            }
        }


    }


    generateMenu = (leftRouter?: IRouter[]) => {

        console.log('====================================');
        console.log(leftRouter);
        console.log('====================================');
        
        return (
            <>
                {
                    leftRouter?.map(r => {
                        if (r.children) {
                            return (
                                <SubMenu key={r.key} icon={r.icon} title={r.title}>
                                    {this.generateMenu(r.children)}
                                </SubMenu>
                            )
                        } else {
                            return (
                                <>
                                    <Menu.Item key={r.key} icon={r.icon}>
                                        <Link to={r.path}>{r.title}</Link>
                                    </Menu.Item>
                                </>
                            )
                        }
                    })
                }
            </>
        )
    }

    render() {
        return (
            <>
                <Sider width={200} className="site-layout-background">
                    {
                        this.state.defaultSelectedKeys.length > 0 ?
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={this.state.defaultSelectedKeys}
                                defaultOpenKeys={this.state.defaultOpenKeys}
                                style={{ height: '100%', borderRight: 0 }}
                            >
                                {this.generateMenu(leftRouter)}
                            </Menu>
                            :
                            null
                    }
                </Sider>
            </>
        );
    }
}

export default withRouter(LeftBar);